<template>
	<view class="pages-order">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="订单列表" leftIcon=""
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<fixed :top="configInfo.navBarHeight" :zIndex="99">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<fixed :zIndex="99">
			<!-- #endif -->
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				width="20%" height="100rpx"></tab>
			<view class="b-1px-b"></view>
		</fixed>
		<view class="order-list">
			<view class="ml-md mr-md mt-md radius-16 fill-base order-item pl-lg pr-lg" v-for="(item,index) in list.data" :key="index"
			@tap="$util.goUrl({url: `/user/pages/order/detail?id=${item.id}&refund=${tabList[activeIndex].id == 999?1:0}`})">
				<view class=" pt-md pb-md b-1px-b">
					<view class="flex-y-center">
						<text class="f-min-title">订单编号：</text>
						<text class="f-desc c-caption">{{item.order_code}}</text>
					</view>
				</view>
				<view class="flex-between h-80">
					<view class="f-desc">预约时间：{{$util.formatTime(item.start_time*1000, 'YY-M-D h:m')}}</view>
					<view v-if="tabList[activeIndex].id == 999" class="f-desc" :style="{color: refundType[item.status].color}">{{refundType[item.status].name}}</view>
					<view v-else class="f-desc" :style="{color: statusType[item.status].color}">{{statusType[item.status].name}}</view>
				</view>
				<view class="flex-between pb-md" v-for="(gitem,gindex) in item.order_goods" :key="gindex">
					<image :src="gitem.image" mode="aspectFill" class="radius-16 order-image"></image>
					<view class="flex-1 pl-md">
						<view class="f-title text-bold">{{gitem.name}}</view>
						<view class="f-caption c-caption">{{gitem.title}}</view>
						<view class=" c-warning f-paragraph">￥{{gitem.price}}</view>
						<!-- <view class="flex-y-baseline ">
							<text class="f-caption text-bold c-warning">￥</text>
							<text class="f-title text-bold c-warning ">466.00</text>
						</view> -->
						<view class="f-caption c-caption">下单时间：{{$util.formatTime(item.create_time*1000, '')}}</view>
					</view>
				</view>
				
				<view class="b-1px-t staff-info flex-between" >
					<view class="flex-y-center" v-if="item.coach_id">
						<image :src="item.coach_info.work_img" mode="aspectFill" class="staff-image"></image>
						<view class="pl-sm f-desc">师傅 - {{item.coach_info.name}}</view>
					</view>
					<view class="flex-center">
						<!--待上门-->
						<block v-if="item.status == 3">
							<view class="radius-10 order-btn cancel-btn flex-center f-desc" 
							@tap.stop="changeOrder(index, 'cancel')" v-if="item.can_cancel == 1">取消订单</view>
							<view class="radius-10 order-btn flex-center f-desc ml-md" 
							:style="{color: `#fff`, background: primaryColor}" 
							@tap.stop="changeOrder(index)">马上出发</view>
						</block>
						<block v-if="item.status == 4">
							<view class="radius-10 order-btn flex-center f-desc ml-md"
							:style="{color: `#fff`, background: primaryColor}" 
							@tap.stop="changeOrder(index)">已到达</view>
						</block>
						<block v-if="item.status == 5">
							<view class="radius-10 order-btn flex-center f-desc ml-md"
							:style="{color: `#fff`, background: primaryColor}" 
							@tap.stop="changeOrder(index)">开始服务</view>
						</block>
						<block v-if="item.status == 6">
							<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
							:style="{border: `1px solid ${primaryColor}`, color: primaryColor}" v-if="!item.add_price_list && item.order_type == 1"
							@tap.stop="setDifference(index)">{{item.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
							<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
							:style="{color: `#fff`, background: primaryColor}" 
							@tap.stop="changeOrder(index)">{{item.order_type == 1 ? `输入验收码` : `服务完成`}}</view>
						</block>
						<!-- <block v-if="item.status == 7 && item.order_type == 1">
							<view class="radius-10 order-btn flex-center f-desc ml-md"
							:style="{color: `#fff`, background: primaryColor}" 
							@tap.stop="changeOrder(index)">订单完成</view>
						</block> -->
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="order_box" type="center" :custom="true">
			<view class="order-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<block v-if="form.order_type == 2">
					<view class="f-title flex-center h-80 text-bold rel">服务完成
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph text-bold pb-lg pt-lg">上传付款凭证</view>
					<view class="pb-lg flex-center">
						<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.image" imgtype="image" text="上传图片" :imgsize="9"
							:pictureSize="5" imgclass="mini">
						</upload>
					</view>
					<view class="flex-center pb-lg pt-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder(999,'service')">服务完成</view>
					</view>
				</block>
				<block v-else>
					<view class="f-title flex-center h-80 text-bold rel">验收
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph pb-lg pt-lg">输入验收码</view>
					<view class="pb-lg flex-center">
						<view class="">
							<xt-verify-code v-model="form.check_code" :size="4" cursorColor="#fff"></xt-verify-code>
						</view>
					</view>
					<block v-if="configInfo.coach_end_order_upload">
						<view class="f-paragraph pb-lg pt-lg">请上传完成图片</view>
						<view class="pb-lg flex-center">
							<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.order_check_img" imgtype="order_check_img" text="上传图片" :imgsize="9"
								:pictureSize="5" imgclass="mini">
							</upload>
						</view>
					</block>
					<!-- <view class="text-right c-caption f-caption">最多不超过9张图片</view> -->
					<view class="flex-center pb-lg pt-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder(999,'service')">确定</view>
					</view>
				</block>
			</view>
		</uni-popup>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>
		
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="4"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	import xtVerifyCode from "@/components/xt-verify-code"
	export default {
		components: {
			tabbar,
			xtVerifyCode
		},
		data() {
			return {
				options: {},
				statusType: {
					'-2': {name: '已取消', color: '#999999'},
					'-1': {name: '已取消', color: '#999999'},
					3: {name: '待上门', color: '#999999'},
					4: {name: '已出发', color: '#999999'},
					5: {name: '待开始', color: '#999999'},
					6: {name: '服务中', color: '#999999'},
					7: {name: '服务完成', color: '#999999'},
					8: {name: '订单完成', color: '#999999'}
				},
				refundType: {
					1: {name: '待审核', color: '#999999'},
					2: {name: '已退款', color: '#999999'},
					3: {name: '退款失败', color: '#999999'}
				},
				form: {
					image: [],
					id: '',
					status: '',
					order_type: 2,
					check_code: '',
					order_check_img: []
				},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			activeIndex: state => state.order.activeIndex,
			tabList: state => state.order.tabList,
			param: state => state.order.param,
			list: state => state.order.list,
			userInfo: state => state.user.userInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			let {
				tab = 0
			} = options
			this.updateOrderItem({
				key: 'activeIndex',
				val: tab
			})
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.loading = true;
			this.getList(this.param.page + 1);
		},
		methods: {
			...mapActions(['getConfigInfo', 'getOrderList', 'getRefundList']),
			...mapMutations(['updateOrderItem']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				await this.getList(1)
			},
			initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getList(page = 0){
				if (page) {
					let param = this.$util.deepCopy(this.param)
					param.page = page
					this.updateOrderItem({
						key: 'param',
						val: param
					})
				}
				let {
					list: oldList,
					param,
					tabList,
					activeIndex = 0
				} = this
				param.status = tabList[activeIndex].id
				try {
					if(tabList[activeIndex].id == 999){
						await this.getRefundList({page: param.page, status: 0})
					}else{
						await this.getOrderList(param)
					}
					this.loading = false
					this.$util.hideAll()
				} catch (e) {
					this.loading = false
					this.$util.hideAll()
				}
			},
			handerTabChange(index) {
				console.log(index)
				this.updateOrderItem({
					key: 'activeIndex',
					val: index
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				//this.$util.showLoading()
				this.getList(1)
			},
			async changeOrder(index,type = ''){
				let {
					id,
					status,
					order_type,
					is_add = 0
				} = type == 'service' ? this.form : this.list.data[index]
				if(type != 'service'){
					this.form.order_check_img = []
					this.form.check_code = ''
				}
				let param = {
					id,
					status
				}
				if(status == 3){ // 待上门
					param.status = 4
				}else if(status == 4){ // 已出发
					param.status = 5
				}else if(status == 5){ // 待开始
					param.status = 6
				}else if(status == 6 ){ // 服务中
					if(order_type == 2){ // 需要上传图片  上门回收
						this.form.id = id
						this.form.status = 7
						this.form.order_type = order_type
						this.$refs.order_box.open()
						return
					}else{
						if(is_add == 1){
							this.$util.showToast({
								title: '补完差价才能输入验收码'
							})
							return
						}
						this.form.id = id
						this.form.status = 7
						this.form.order_type = order_type
						this.$refs.order_box.open()
						return
					}
					// param.status = 8
				}
				if(type == 'cancel'){
					// param.status = 2
					// let [res_del, {
					// 	confirm
					// }] = await uni.showModal({
					// 	content: `请确认是否要取消订单`,
					// })
					// if (!confirm) return;
					this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					return
				}
				if(type == 'service'){
					let form = this.$util.deepCopy(this.form)
					if(form.order_type == 2){
						if(form.image.length == 0){
							this.$util.showToast({
								title: '请上传付款凭证'
							})
							return
						}
						param.order_pay_img = form.image.map(item => {
							return item.path
						})
					}else{
						let {
							check_code = ''
						} = form
						if(check_code.length != 4){
							this.$util.showToast({
								title: '请输入验收码'
							})
							return
						}
						
						if(form.order_check_img.length > 0){
							param.order_check_img = form.order_check_img.map(item => {
								return item.path
							})
						}
						param.check_code = check_code
						param.status = 7
					}
				}
				this.$util.showLoading()
				await this.$api.order.updateOrder(param)
				if(type == 'service'){
					this.$refs.order_box.close()
				}
				this.$util.hideAll()
				this.$util.showToast({
					title: param.status == 2 ? '取消成功' : '操作成功'
				})
				this.getList(1)
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			// 补差价
			setDifference(index){
				let {
					id,
					is_add = 0
				} = this.list.data[index]
				
				this.$util.goUrl({url: `/demand/pages/order/difference?id=${id}&type=1&is_add=${is_add}`})
			},
		},
	}
</script>


<style lang="scss">
	.pages-order {
		.order-item{
			padding-bottom: 24rpx;
			.order-image{
				width: 160rpx;
				height: 160rpx;
			}
			.order-btn{
				min-width: 152rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
			.cancel-btn{
				border: 1px solid #979797;
			}
			.staff-info{
				padding-top: 24rpx;
			}
			.staff-image{
				width: 51rpx;
				height: 51rpx;
				border-radius: 51rpx;
			}
		}
		.order-box{
			width: 690rpx;
			.service-btn{
				width: 222rpx;
				height: 72rpx;
				color: #5B5B5B;
			}
		}
	}
</style>
